<html>
    <head>
        <title>总览</title>
    </head>
    <body>
        <script>
           //    asp.net core  MVC / Razor Pages 
           
                /*
                    一、导言

                            ABP提供了一种使用ASP.NETCore MVC/Razor Pages作为用户界面框架创建Web应用程序的方便和舒适的方法。

                            (   ABP不提供新的/自定义的UI开发方式。
                            
                                您可以继续使用您当前的技能来创建UI。
                                
                                但是，它提供了许多功能，使您的开发更容易并拥有更易于维护的代码库。)




                           1、MVC 与  Razor Pages 

                                    ASP.NETCore为UI开发提供了两种模型：

                                        (1)、MVC（Model-View-Controller）是1.0版的经典方式。此模型可用于创建UI页面/组件和HTTP API。

                                        (2)、Razor Pages是随着ASP.NETCore 2.0引入的，作为一种创建网页的新方法
                                      
                                    ABP支持MVC和Razor Pages模型。

                                    但是，建议使用Razor Pages方法创建UI页面，并使用MVC模型构建HTTP API。

                                    因此，所有预构建模块、示例和留档都基于Razor Pages进行UI开发，而您可以始终应用MVC模式来创建自己的页面。


                            2、模块化

                                    模块化是ABP的关键目标之一。
                                    
                                    对于UI来说没有什么不同；可以使用"隔离"和 "可重用" 的UI页面和组件开发模块化应用程序和可重用的应用程序模块。

                                    应用程序启动模板预装了一些应用程序模块。

                                    这些模块将自己的UI页面嵌入到自己的NuGet包中。您在解决方案中看不到它们的代码，但它们在运行时按预期工作。

                */

                /*
                     二、主题系统   Theme System

                                    ABP提供了一个完整的Theming系统，其目标如下：

                                            ①、可重用的模块的主题都是独立的，因此它们可以与任何UI主题一起使用。

                                            ②、UI主题由最终应用程序决定。

                                            ③、该主题通过NuGet/NPM包分发，因此易于升级。

                                            ④、最终应用程序可以自定义所选主题。


                                    1、当前主题   Current Themes

                                                    目前，官方提供了三个主题：

                                                        ①、Basic Theme（基本主题） ： 具有普通Bootstrap风格的极简主义主题。它是开源和免费的。

                                                        ②、Lepton主题是由核心ABP团队开发的"商业主题"，是ABP许可证的一部分。

                                                        ③、LeptonX主题是一个同时具有商业和lite(免费精简版)选项的主题。

                                                    ABP也有一些社区驱动的主题（您可以在网络上搜索）。
               
                                    2、前端基础库  Base Libraries

                                                    所有主题都预装并支持一组标准JavaScript/CSS库：

                                                        ①、Twitter Bootstrap作为基本的超文本标记语言/CSS框架。
                                                        
                                                        ②、 用于DOM操作的JQuery。

                                                        ③、 DataTables.Net用于数据网格。

                                                        ④、用于客户端的JQuery验证和不显眼的验证
                    
                                                        ⑤、FontAwese作为基本的CSS字体库。

                                                        ⑥、SweetAlert显示精美的警报消息和确认对话框。

                                                        ⑦、Toastr显示通知。

                                                        ⑧、 Lodash作为通用工具库。

                                                        ⑨、 Luxon用于日期/时间操作。

                                                        ⑩、 JQuery Form用于AJAX表单的JQuery Form。

                                                        ⑪、bootstrap-datepicker显示日期选择器。

                                                        ⑫、Select2选择/组合框。

                                                        ⑬、Timeago显示自动更新的模糊时间戳

                                                        ⑭、malihu-custom-scrollbar-plugin用于自定义滚动条。


                                                您可以直接在应用程序中使用这些库，而无需手动导入页面。
               
                                    3、布局  Layouts

                                                主题提供标准布局。因此，您拥有已实现标准功能的响应式布局。下面的屏幕截图取自基本主题的应用程序布局：

                                                有关更多布局选项和其他详细信息，请参阅主题文档: https://abp.io/docs/latest/framework/ui/mvc-razor-pages/theming
               

                                    4、布局零件
                                    
                                                一个典型的布局由多个部分组成。

                                                Theming系统提 供菜单(menus)、工具栏(toolbars)、布局挂钩(layout hooks)等来动态控制您的应用程序和您正在使用的模块的布局
                */

                /*
                    三、功能特定   

                                本节重点介绍ABP为ASP.NETCore MVC/Razor Pages UI提供的一些功能。


                                1、动态JavaScript API客户端代理

                                                动态JavaScript API客户端代理系统允许您从JavaScript客户端代码中使用服务器端HTTP API，就像调用本地函数一样。

                                                eg： 从服务器获取作者列表
                                                
                                                    acme.bookStore.authors.author.getList({
                                                                                            maxResultCount: 10
                                                                                    }).then(function(result){
                                                                                        console.log(result.items);
                                                                                    });

                                                acme.bookStore.authors.author.getList是一个自动生成的函数，它在内部对服务器进行AJAX调用。

                                                有关更多信息，请参阅动态JavaScript API客户端代理文档:  https://abp.io/docs/latest/framework/ui/mvc-razor-pages/dynamic-javascript-proxies


                                2、Bootstrap 标签助手  Bootstrap Tag Helpers 

                                                ABP使编写Bootstrap超文本标记语言变得更容易&类型安全：

                                                eg:  渲染Bootstrap模式

                                                     <abp-modal>
                                                        <abp-modal-header title="Modal title" />
                                                            <abp-modal-body>
                                                                Woohoo, you're reading this text in a modal!
                                                            </abp-modal-body>
                                                        <abp-modal-footer buttons="@(AbpModalButtons.Save|AbpModalButtons.Close)"></abp-modal-footer>
                                                    </abp-modal>


                                                有关更多信息，请参阅标记助手文档: https://abp.io/docs/latest/framework/ui/mvc-razor-pages/tag-helpers

                                3、表单和验证 Forms & Validation

                                                ABP提供了abp-dynamic-form和abp-input标签帮助程序来显着简化以创建一个功能齐全的表单，该表单可以自动进行本地化、验证和AJAX提交。

                                                eg：使用abp-dynamic-form基于模型创建完整表单
                                                    
                                                   <abp-dynamic-form abp-model="Movie" submit-button="true" />

                                                有关详细信息，请参阅表单和验证文档:


                                4、捆绑和虽小客户端包 Bundling & Minification / Client Side Libraries

                                                ABP提供了一个灵活的模块化捆绑和缩小系统来创建捆绑包并在运行时缩小样式/脚本文件。

                                                     <abp-style-bundle>
                                                        <abp-style src="/libs/bootstrap/css/bootstrap.css" />
                                                        <abp-style src="/libs/font-awesome/css/font-awesome.css" />
                                                        <abp-style src="/libs/toastr/toastr.css" />
                                                        <abp-style src="/styles/my-global-style.css" />
                                                    </abp-style-bundle>

                                                此外，客户端包管理系统提供了一种模块化和一致的方式来管理第3方库依赖项。

                                                请参阅捆绑和缩小和客户端包管理文档。

                                5、JavaScript API

                                                JavaScript API为服务器端本地化、设置、权限、功能等提供了强大的抽象。它们还提供了一种向用户显示消息和通知的简单方法。


                                6、 模态框（Modals）、警报(Alerts)、小部件（Widgets）等

                                                小部件系统可用于创建可重用的小部件和创建仪表板。

                                                页面警报可以轻松地向用户显示警报。

                                                模态管理器提供了一种构建和使用模态的简单方法。

                                                Data Tables集成使创建数据网格变得简单。
                */

                /*
                    四、自定义 Customization

                                有很多方法可以自定义主题和预构建模块的UI。您可以覆盖组件、页面、静态资源、捆绑包等。请参阅用户界面自定义指南。
                */
        </script>
    </body>
</html>